<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 系统错误</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #008080;
            font-family: 'Courier New', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
        }
        .computer {
            background-color: #c0c0c0;
            border: 4px solid #000;
            border-top-color: #dfdfdf;
            border-left-color: #dfdfdf;
            width: 80%;
            max-width: 600px;
            padding: 20px;
            box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
        }
        .screen {
            background-color: #000080;
            border: 3px solid #000;
            padding: 20px;
            margin-bottom: 20px;
            height: 300px;
            overflow: auto;
        }
        .title-bar {
            background-color: #000080;
            color: #fff;
            padding: 5px 10px;
            margin: -20px -20px 20px -20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 3px solid #000;
        }
        .buttons {
            display: flex;
            gap: 5px;
        }
        .button {
            width: 20px;
            height: 20px;
            background-color: #c0c0c0;
            border: 2px solid #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            cursor: pointer;
        }
        .button:active {
            border: 2px solid #808080;
            border-right-color: #fff;
            border-bottom-color: #fff;
        }
        .prompt {
            color: #00ff00;
            margin-bottom: 10px;
        }
        .cursor {
            animation: blink 1s infinite;
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #c0c0c0;
            color: #000;
            text-decoration: none;
            border: 2px solid #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            margin-right: 10px;
            margin-top: 10px;
        }
        .btn:active {
            border: 2px solid #808080;
            border-right-color: #fff;
            border-bottom-color: #fff;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="computer">
        <div class="screen">
            <div class="title-bar">
                <div>404 ERROR</div>
                <div class="buttons">
                    <div class="button">_</div>
                    <div class="button">□</div>
                    <div class="button">×</div>
                </div>
            </div>
            
            <div class="prompt">C:\&gt; cd 请求的页面</div>
            <div class="prompt">系统找不到指定的路径。</div>
            <div class="prompt"></div>
            <div class="prompt">可能原因:</div>
            <div class="prompt">- 路径拼写错误</div>
            <div class="prompt">- 页面已被移动或删除</div>
            <div class="prompt">- 系统资源不足</div>
            <div class="prompt"></div>
            <div class="prompt">C:\&gt; <span class="cursor">_</span></div>
            
            <a href="/" class="btn">返回根目录</a>
            <a href="javascript:history.back()" class="btn">返回上一级</a>
        </div>
        
        <div style="text-align: center; font-size: 0.8rem; margin-top: 10px;">
            Windows 95 | 系统资源: 404/404
        </div>
    </div>
</body>
</html>